// 设备配置弹窗
import { useQuery } from '@tanstack/react-query';
import { Descriptions, Modal } from 'antd';
import React, { useEffect, useState } from 'react';

import api from '@/apis/api';

type DeviceInfoModalProps = {
  visible: boolean;
  setVisible: (visible: boolean) => void;
};

interface DataType {
  manufactureName: string;
  deviceName: string;
  interfaceVersion: string;
  softwareVersion: string;
  submitNumber: string;
  asymAlgAbility: string;
  symAlgAbility: string;
  hashAlgAbility: string;
}

const DeviceinfoureModal: React.FC<DeviceInfoModalProps> = ({ visible, setVisible }) => {
  const fieldLabelMap: Record<string, string> = {
    manufactureName: '厂商名称',
    deviceName: '设备名称',
    interfaceVersion: '算法软件版本',
    softwareVersion: '管理软件版本',
    submitNumber: '序列号',
    asymAlgAbility: '支持的非对称算法',
    symAlgAbility: '支持的对称算法',
    hashAlgAbility: '支持的摘要算法',
  };

  const [infoTableData, setinfoTableData] = useState<DataType>({
    manufactureName: '',
    deviceName: '',
    interfaceVersion: '',
    softwareVersion: '',
    submitNumber: '',
    asymAlgAbility: '',
    symAlgAbility: '',
    hashAlgAbility: '',
  });

  const { data: deviceInfo } = useQuery({
    queryKey: ['getDeviceInfo'],
    queryFn: async (params) => {
      const res: any = await api.GetDeviceInfo(params);
      return res.data;
    },
    enabled: !!visible,
  });

  useEffect(() => {
    if (deviceInfo) {
      const { items } = deviceInfo;
      if (items.length > 0) {
        setinfoTableData(items[0]);
      } else {
        setinfoTableData(items);
      }
    }
  }, [deviceInfo]);

  const onClose = () => {
    setVisible(false);
  };
  return (
    <>
      <Modal title="设备信息" open={visible} onCancel={onClose} footer={[]}>
        <div style={{ marginTop: 24, marginBottom: 24 }}>
          <Descriptions bordered size={'small'} column={1}>
            {Object.entries(infoTableData).map(
              ([key, value], index) =>
                // 排除id字段
                key !== 'id' && (
                  <Descriptions.Item key={index} label={fieldLabelMap[key]}>
                    {value}
                  </Descriptions.Item>
                ),
            )}
          </Descriptions>
        </div>
      </Modal>
    </>
  );
};

export default React.memo(DeviceinfoureModal);
